<template>
  <button v-el:datepicker-el class="btn btn-default btn-xs" v-if="datepickerType == 'anchor'">
    <i class="fa fa-calendar"></i>
  </button>
  <div v-el:datepicker-el class="input-group date" v-if="datepickerType == 'input'">
    <input type="text" class="form-control">
    <div class="input-group-addon">
      <span class="fa fa-calendar"></span>
    </div>
  </div>
  <div v-el:datepicker-el class="input-group input-daterange" v-if="datepickerType == 'range'">
    <input type="text" class="form-control">
    <span class="input-group-addon">TO</span>
    <input type="text" class="form-control">
  </div>
</template>

<script type='text/babel'>
  import $ from 'jquery'
  import '../../../static/js/thirdparty/bootstrap-datepicker.min'
  import '../../../static/js/thirdparty/bootstrap-datepicker.zh-CN.min'

  export default {
    props: {
      datepickerValue: {
        type: String,
        default: ''
      },
      datepickerFormat: {
        type: String,
        default: 'yyyy/mm/dd'
      },
      datepickerAutoclose: Boolean,
      datepickerType: {
        type: String,
        default: 'anchor'
      }
    },
    methods: {
      currentDate: function () {
        return $(this.$els.datepickerEl).datepicker('getFormattedDate')
      },
      dateRange: function () {
        var dates = []
        $(this.$els.datepickerEl).children('input').each(function () {
          dates.push($(this).datepicker('getFormattedDate'))
        })
        return dates
      },
      show: function () {
        $(this.$els.datepickerEl).datepicker('show')
      },
      hide: function () {
        $(this.$els.datepickerEl).datepicker('hide')
      },
      update: function () {
        $(this.$els.datepickerEl).datepicker('update', arguments[0])
      },
      onShow: function (store, e) {
        var self = this
        self.$dispatch('ON_DATEPICKER_SHOW', self, e)
        if (self.$store) {
          self.$store.dispatch('ON_DATEPICKER_SHOW', this, e)
        }
      },
      onHide: function (store, e) {
        var self = this
        self.$dispatch('ON_DATEPICKER_HIDE', self, e)
        if (self.$store) {
          self.$store.dispatch('ON_DATEPICKER_HIDE', this, e)
        }
      },
      onClearDate: function (store, e) {
        var self = this
        self.$dispatch('ON_DATEPICKER_CLEAR_DATE', self, e)
        if (self.$store) {
          self.$store.dispatch('ON_DATEPICKER_CLEAR_DATE', this, e)
        }
      },
      onChangeDate: function (store, e) {
        var self = this
        var type = self.datepickerType
        if (type === 'range') {
          var dates = self.dateRange()
          self.$dispatch('ON_DATEPICKER_CHANGE_DATE', self, dates[0], dates[1], e)
          if (self.$store) {
            self.$store.dispatch('ON_DATEPICKER_CHANGE_DATE', self, dates[0], dates[1], e)
          }
        } else {
          self.$dispatch('ON_DATEPICKER_CHANGE_DATE', self, self.currentDate(), e)
          if (self.$store) {
            self.$store.dispatch('ON_DATEPICKER_CHANGE_DATE', self, self.currentDate(), e)
          }
        }
      },
      onChangeYear: function (store, e) {
        var self = this
        self.$dispatch('ON_DATEPICKER_CHANGE_YEAR', self, e)
        if (self.$store) {
          self.$store.dispatch('ON_DATEPICKER_CHANGE_YEAR', this, e)
        }
      },
      onChangeMonth: function (store, e) {
        var self = this
        self.$dispatch('ON_DATEPICKER_CHANGE_MONTH', self, e)
        if (self.$store) {
          self.$store.dispatch('ON_DATEPICKER_CHANGE_MONTH', this, e)
        }
      }
    },
    attached: function () {
      var self = this
      $(self.$els.datepickerEl).datepicker({
        language: 'zh-CN',
        autoclose: self.datepickerAutoclose,
        format: self.datepickerFormat
      }).on('show', function (e) {
        self.onShow(e)
      }).on('hide', function (e) {
        self.onHide(e)
      }).on('clearDate', function (e) {
        self.onClearDate(e)
      }).on('changeDate', function (e) {
        self.onChangeDate(e)
      }).on('changeYear', function (e) {
        self.onChangeYear(e)
      }).on('changeMonth', function (e) {
        self.onChangeMonth(e)
      })
    },
    detached: function () {
      var self = this
      $(self.$els.datepickerEl).datepicker('destroy')
    }
  }
</script>

<style>
</style>
